<!--
 * @Description: 
 * @Version: 1.668
 * @Autor: Hawk
 * @Date: 2022-05-17 16:57:30
 * @LastEditors: Hawk
 * @LastEditTime: 2022-05-25 15:34:54
-->
<template>
  <div class="forecastTimeLine">
    <timeLine ref="tllREF" :dateFormartStr="dateFormartStr" :timeListLength="30" TimeIntervalUnit="hour"
      :curTimeInterval="3" :cutTime="cutTime" :cutedTimeInterval="cutedTimeInterval"
      :changeCurTime="changeCurTime">
      <template v-slot:tooltip="{ obj }">
        <div class="custom-tooltip">
          {{ obj.value }}
        </div>
      </template>
      <template v-slot:label="{ obj }">
        <div :class="['custom-label', {
          active: obj.active,
          HasDay: curLabelHasDay(obj)
        }]">
          {{ showLabel(obj.label) }}
        </div>
        <div class="dayRiDiv" v-if="curLabelHasDay(obj)">
          {{ curLabelHasDay(obj) }}
        </div>
      </template>
      <template v-slot:dot="{ obj }">
        <div class="custom-dot"></div>
      </template>
      <template v-slot:step="{ obj }">
        <div v-if="curLabelHasDay(obj)" :class="['custom-step', { active: obj.active }]"></div>
        <div v-else :class="['custom-step-line', { active: obj.active }]"></div>
      </template>
    </timeLine>
  </div>
</template>

<script>
import timeLine from '../index.vue'
import dayjs from 'dayjs'

export default {
  name: 'forecastTimeLine',
  components: {
    timeLine,
  },
  data () {
    return {
      dateFormartStr: 'YYYY-MM-DD HH:mm',
      // EC模式下的说明:
      // <=72小时  3小时 间隔
      // >72小时   6小时 间隔
      cutTime: 72, // 分割时间
      cutedTimeInterval: 6, //分割时间后的 间隔时间
    }
  },
  methods: {
    curLabelHasDay (v) {
      let curLabelObj = this.$refs.tllREF.curLabelObj(v.label)
      if (curLabelObj && curLabelObj.curDay) {
        return curLabelObj.curDay + '日'
      }
      return false
    },
    showLabel (v) {
      return dayjs(v, this.dateFormartStr).format('HH')
    },
    async changeCurTime (v) {
      // 可以作为异步函数，然后等待loading结束后再进行其他操作
      console.log('changeCurTime', v)
    }
  },
  computer: {}
}
</script>
<style lang="scss" scoped>
@import '../../css/weatherStyle.scss';
@import './index.scss';
</style>
